<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二手房</title>
  <link rel="stylesheet" href="ui.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #f4f4f4;
      padding: 20px;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo-container {
      font-size: 24px;
      font-weight: bold;
    }

    .sub-nav a {
      margin-right: 15px;
      text-decoration: none;
      color: #333;
    }

    .logo-search form {
      display: flex;
    }

    .logo-search input {
      padding: 10px;
      border: 1px solid #ccc;
      border-right: none;
    }

    .logo-search button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
    }

    .category-nav {
      background-color: #eaeaea;
      padding: 10px;
    }

    .category-nav a {
      margin-right: 15px;
      text-decoration: none;
      color: #333;
    }

    .breadcrumbs {
      padding: 10px 20px;
    }

    .filter-area {
      padding: 20px;
    }

    .filter-group {
      margin-bottom: 15px;
    }

    .filter-reset {
      padding: 10px 20px;
      background-color: #ccc;
      color: white;
      border: none;
      cursor: pointer;
    }

    .listing-area {
      padding: 20px;
    }

    .listing-tab {
      margin-bottom: 20px;
    }

    .listing-tab a {
      margin-right: 15px;
      text-decoration: none;
      color: #333;
    }

    .listing-tab a.active {
      color: #007BFF;
      font-weight: bold;
    }

    .listing-item {
      border: 1px solid #ccc;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
    }

    .listing-img img {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }

    .tag {
      background-color: #007BFF;
      color: white;
      padding: 5px 10px;
      border-radius: 3px;
      margin-left: 10px;
    }

    .listing-info {
      margin-top: 10px;
    }

    .listing-price {
      margin-top: 10px;
      font-weight: bold;
      color: #007BFF;
    }
  </style>
</head>

<body>
<!-- 顶部导航栏 -->
<header>
  <div class="top-bar">
    <div class="logo-container">
      <!-- <img src="logo.jpg" alt="logo"> -->
      <span class="logo-text">浮点流觞</span>
    </div>
    <div class="sub-nav">
      <a href="gerenzhongxin.html">个人中心</a>
      <a href="#">商家中心</a>
      <a href="bangzhuzhongxin.html">帮助中心</a>
      <a href="kefu.html">联系客服</a>
      <a href="login.html" class="login-item">登录</a>
      <a href="register.html" class="register-item">注册</a>
    </div>
  </div>
  <div class="logo-search">
    <form action="#" class="search-form">
      <input type="text" placeholder="请输入房源相关信息">
      <button type="submit">搜房源</button>
    </form>
    <a href="fabufangyuan.html" class="free-publish">免费发布</a>
  </div>
</header>

<!-- 分类导航栏 -->
<nav class="category-nav">
  <a href="#" class="category-item">租房</a>
  <a href="#" class="category-item">二手房</a>
  <a href="#" class="category-item">新房</a>
  <a href="#" class="category-item">商铺</a>
  <a href="#" class="category-item">生意转让</a>
  <a href="#" class="category-item">写字楼</a>
  <a href="#" class="category-item">厂房</a>
  <a href="#" class="category-item">仓库</a>
  <a href="#" class="category-item">土地</a>
  <a href="#" class="category-item">车位</a>
</nav>

<!-- 路径导航 -->
<div class="breadcrumbs">
  <a href="#">房产网</a> > <a href="#">二手房</a>
</div>

<!-- 筛选条件区域 -->
<div class="filter-area">
  <div class="filter-group">
    <label for="region">地域</label>
    <select id="region">
      <option value="不限">不限</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="成都">成都</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="杭州">杭州</option>
      <option value="西安">西安</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="area">区域</label>
    <select id="area">
      <option value="不限">不限</option>
      <!-- 北京的区域示例 -->
      <option value="朝阳区" data-region="北京">朝阳区</option>
      <option value="海淀区" data-region="北京">海淀区</option>
      <!-- 上海的区域示例 -->
      <option value="浦东新区" data-region="上海">浦东新区</option>
      <option value="黄浦区" data-region="上海">黄浦区</option>
      <!-- 成都的区域示例 -->
      <option value="武侯区" data-region="成都">武侯区</option>
      <option value="锦江区" data-region="成都">锦江区</option>
      <!-- 广州的区域示例 -->
      <option value="天河区" data-region="广州">天河区</option>
      <option value="越秀区" data-region="广州">越秀区</option>
      <!-- 深圳的区域示例 -->
      <option value="南山区" data-region="深圳">南山区</option>
      <option value="福田区" data-region="深圳">福田区</option>
      <!-- 杭州的区域示例 -->
      <option value="西湖区" data-region="杭州">西湖区</option>
      <option value="滨江区" data-region="杭州">滨江区</option>
      <!-- 西安的区域示例 -->
      <option value="雁塔区" data-region="西安">雁塔区</option>
      <option value="未央区" data-region="西安">未央区</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="subway">地铁线路</label>
    <select id="subway">
      <option value="不限">不限</option>
      <!-- 地铁线路选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="community">小区</label>
    <input type="text" id="community">
  </div>
  <div class="filter-group">
    <label for="price">价格</label>
    <select id="price">
      <option value="不限">不限</option>
      <option value="50万以下">50万以下</option>
      <option value="50万-100万">50万-100万</option>
      <option value="100万-200万">100万-200万</option>
      <option value="200万以上">200万以上</option>
      <!-- 其他价格区间选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="room">厅室</label>
    <select id="room">
      <option value="不限">不限</option>
      <option value="一室">一室</option>
      <option value="两室">两室</option>
      <option value="三室">三室</option>
      <option value="四室及以上">四室及以上</option>
      <!-- 其他厅室选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="houseType">户型</label>
    <select id="houseType">
      <option value="不限">不限</option>
      <option value="普通住宅">普通住宅</option>
      <option value="别墅">别墅</option>
      <option value="公寓">公寓</option>
      <!-- 其他户型选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="other">其他</label>
    <select id="other">
      <option value="朝向不限">朝向不限</option>
      <option value="装修不限">装修不限</option>
      <!-- 其他筛选选项可按需求添加 -->
    </select>
  </div>
  <button type="button" class="filter-reset">重置筛选</button>
</div>

<!-- 房源展示区域 -->
<main class="listing-area">
  <div class="listing-tab">
    <a href="#" class="tab-item">租房</a>
    <a href="#" class="tab-item active">二手房</a>
    <a href="#" class="tab-item">新房</a>
    <a href="#" class="tab-item">商铺</a>
    <a href="#" class="tab-item">生意转让</a>
    <a href="#" class="tab-item">写字楼</a>
    <a href="#" class="tab-item">厂房</a>
    <a href="#" class="tab-item">仓库</a>
    <a href="#" class="tab-item">土地</a>
    <a href="#" class="tab-item">车位</a>
  </div>
  <div id="listing-container"></div> <!-- 新增的房源容器 -->
</main>

<script>
  // 模拟二手房房源数据
  const secondHandHouseListings = [
    {
      id: 1,
      img: "house1.jpg",
      type: "普通住宅",
      roomInfo: "三室两厅两卫，南北通透，采光好",
      area: "120.00㎡",
      location: "朝阳区 朝阳小区",
      agent: "来自经纪人: 房产之星 李华",
      price: "300万",
      region: "北京",
      areaName: "朝阳区",
      subway: "1号线",
      community: "朝阳小区",
      priceRange: "200万以上",
      roomType: "三室",
      houseType: "普通住宅",
      other: "朝向不限"
    },
    {
      id: 2,
      img: "house2.jpg",
      type: "公寓",
      roomInfo: "一室一厅一卫，精装修，近地铁",
      area: "50.00㎡",
      location: "海淀区 海淀公寓",
      agent: "来自经纪人: 房产专家 王强",
      price: "80万",
      region: "北京",
      areaName: "海淀区",
      subway: "4号线",
      community: "海淀公寓",
      priceRange: "50万-100万",
      roomType: "一室",
      houseType: "公寓",
      other: "装修不限"
    }
    // 更多二手房房源数据...
  ];

  // 渲染房源列表
  function renderListings(listings) {
    const listingContainer = document.getElementById('listing-container');
    listingContainer.innerHTML = "";
    listings.forEach(listing => {
      const listingItem = document.createElement('div');
      listingItem.classList.add('listing-item');
      listingItem.innerHTML = `
                    <div class="listing-img">
                        <img src="${listing.img}" alt="房源图片">
                        <span class="tag">优质房源</span>
                    </div>
                    <div class="listing-info">
                        <span class="type">${listing.type}</span> | <span class="room-info">${listing.roomInfo}</span>
                        <p class="area">${listing.area}</p>
                        <p class="location">${listing.location}</p>
                        <p class="agent">${listing.agent}</p>
                    </div>
                    <div class="listing-price">
                        <span class="price">${listing.price}</span>
                    </div>
                `;
      listingContainer.appendChild(listingItem);
    });
  }

  // 筛选房源
  function filterListings() {
    const region = document.getElementById('region').value;
    const area = document.getElementById('area').value;
    const subway = document.getElementById('subway').value;
    const community = document.getElementById('community').value;
    const price = document.getElementById('price').value;
    const room = document.getElementById('room').value;
    const houseType = document.getElementById('houseType').value;
    const other = document.getElementById('other').value;

    let filteredListings = secondHandHouseListings;

    if (region!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.region === region);
    }
    if (area!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.areaName === area);
    }
    if (subway!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.subway === subway);
    }
    if (community) {
      filteredListings = filteredListings.filter(listing => listing.community.includes(community));
    }
    if (price!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.priceRange === price);
    }
    if (room!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.roomType === room);
    }
    if (houseType!== "不限") {
      filteredListings = filteredListings.filter(listing => listing.houseType === houseType);
    }
    if (other!== "朝向不限" && other!== "装修不限") {
      filteredListings = filteredListings.filter(listing => listing.other === other);
    }

    renderListings(filteredListings);
  }

  // 初始渲染房源列表
  renderListings(secondHandHouseListings);

  // 绑定筛选事件
  const regionSelect = document.getElementById('region');
  const areaSelect = document.getElementById('area');
  const subwaySelect = document.getElementById('subway');
  const communityInput = document.getElementById('community');
  const priceSelect = document.getElementById('price');
  const roomSelect = document.getElementById('room');
  const houseTypeSelect = document.getElementById('houseType');
  const otherSelect = document.getElementById('other');
  const resetButton = document.querySelector('.filter-reset');

  regionSelect.addEventListener('change', filterListings);
  areaSelect.addEventListener('change', filterListings);
  subwaySelect.addEventListener('change', filterListings);
  communityInput.addEventListener('input', filterListings);
  priceSelect.addEventListener('change', filterListings);
  roomSelect.addEventListener('change', filterListings);
  houseTypeSelect.addEventListener('change', filterListings);
  otherSelect.addEventListener('change', filterListings);
  resetButton.addEventListener('click', () => {
    regionSelect.value = "不限";
    areaSelect.value = "不限";
    subwaySelect.value = "不限";
    communityInput.value = "";
    priceSelect.value = "不限";
    roomSelect.value = "不限";
    houseTypeSelect.value = "不限";
    otherSelect.value = "朝向不限";
    renderListings(secondHandHouseListings);
  });
</script>
</body>

</html>